<template>
  <view>
    <!-- 1.0搜索框 -->
    <search></search>
    <!-- 2.0分类 -->
    <block>
      <view class="cate">
        <scroll-view class="cate_left" scroll-y>
          <view
            class="cate_left_item"
            v-for="(item, index) in cateleft"
            :key="item.id"
            :class="{ active: activeIndex === index }"
            @tap="changeTabsIndex(index)"
          >
            {{ item.name }}
          </view>
        </scroll-view>
        <scroll-view class="cate_right" scroll-y>
          <block v-for="item in cateright" :key="item.cat_id">
            <view v-if="item.children" class="cate_right_title">{{
              item.cat_name
            }}</view>
            <view class="cate_right_list">
              <navigator
                class="cate_right_item"
                v-for="item2 in item.children"
                :key="item2.cat_id"
                :url="'/pages/goods_list/main?cid=' + item2.cat_id"
                hover-class="none"
              >
                <image class="cate_right_item_image" :src="item2.cat_icon" />
                <text class="cate_right_item_text">{{ item2.cat_name }}</text>
              </navigator>
            </view>
          </block>
        </scroll-view>
      </view>
    </block>
  </view>
</template>

<script>
import search from "@/components/search/index";
// 声明一个变量，用于存放所有的分类数据
let cateAll = [];
export default {
  data() {
    return {
      cateleft: [],
      cateright: [],
      activeIndex: 0,
    };
  },
  components: {
    search,
  },
  onLoad() {
    // this.getcateleft();
    cateAll = uni.getStorageSync("cateAll");
    // console.log(cateAll);
    if (!cateAll) {
      console.log("❌无缓存，发起新的请求");
      this.getcateleft();
    } else {
      console.log("✅有缓存，还要检查数据是否过期");
      // 现在的时间
      const nowTime = new Date();
      // 过期的事件
      const endTime = uni.getStorageSync("cateAllEndTime");
      // 如果
      if (nowTime > endTime) {
        this.getcateleft();
      } else {
        // 左侧分类数据绑定
        this.cateLeft = cateAll.map((item) => ({
          id: item.cat_id,
          name: item.cat_name,
        }));
        // 右侧分类数据绑定
        this.cateRight = cateAll[0].children;
      }
    }
  },
  methods: {
    changeTabsIndex(index) {
      this.activeIndex = index;
      // 从大数组中根据点击的索引获取到对应右侧的数据
      // 清空数组，间接让滚动条初始化
      this.cateright = [];
      setTimeout(() => {
        // 从大数组中根据点击的索引获取到对应右侧的数据
        this.cateright = cateAll[index].children;
      }, 20);
    },
    async getcateleft() {
      // 获取分类页所有数据
      cateAll = await this.$https.get("/categories");
      // 左侧分类数据绑定
      this.cateleft = cateAll.map((item) => ({
        id: item.cat_id,
        name: item.cat_name,
      }));
      // 右侧分类数据绑定
      this.cateright = cateAll[0].children;
      // console.log("分类所有数据", cateAll);
      // 把获取到的数据存到本地
      uni.setStorageSync("cateAll", cateAll);
      // 过期时间
      const cateAllEndTime = +new Date() + 1 * 60 * 1000;
      // 设置过期时间进去
      uni.setStorageSync("cateAllEndTime", cateAllEndTime);
      // console.log('分类所有数据',cateAll);
    },
  },
};
</script>

<style lang="less">
.cate {
  display: flex;
  .cate_left {
    width: 182rpx;
    // 视口总高度 - 搜索框高度 = 滚动容器高度
    height: calc(100vh - 100rpx);
    /* #ifdef H5 */
    // 浏览器端：视口总高度 - 搜索框高度 - 头部导航高 - 底部tabBar高 = 滚动容器高度
    height: calc(100vh - 100rpx - 44px - 50px);
    /* #endif */
    background-color: #f3f3f3;
    .cate_left_item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 182rpx;
      height: 84rpx;
      font-size: 28rpx;
      color: #585858;
    }
    .active {
      position: relative;
      color: #eb4450;
      font-weight: 700;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        width: 5rpx;
        top: 20rpx;
        bottom: 20rpx;
        background-color: #eb4450;
      }
    }
  }
  .cate_right {
    flex: 1;
    // 视口总高度 - 搜索框高度 = 滚动容器高度
    height: calc(100vh - 100rpx);
    /* #ifdef H5 */
    // 浏览器端：视口总高度 - 搜索框高度 - 头部导航高 - 底部tabBar高 = 滚动容器高度
    height: calc(100vh - 100rpx - 44px - 50px);
    /* #endif */
    background-color: #ffffff;
    .cate_right_title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80rpx;
      &::before,
      &::after {
        content: "/";
        color: #999;
        margin: 0 5rpx;
      }
    }
    .cate_right_list {
      display: flex;
      flex-wrap: wrap;
      .cate_right_item {
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
        .cate_right_item_image {
          width: 120rpx;
          height: 120rpx;
        }
        .cate_right_item_text {
          font-size: 22rpx;
        }
      }
    }
  }
}
</style>